<template>
  <div class="app-container">
    <el-main>
      <el-row :gutter="10" class="margin-bottom-sm" style="height: 320px">
        <el-col :span="16" style="height: 100%;">
          <el-card shadow="always" class="top-box" style="height: 100%;">
            <div slot="header" class="clearfix">
              <span>{{ detailData.name || '楼盘名称' }}<span
                v-if="detailData.type_id==78 && (detailData.check_in_at || '')!==''"
                class="text-gray text-sm"
              >（{{ ((detailData.check_in_at || '').substring(0, 4) || '') + '年' }}）</span></span>
            </div>
            <el-descriptions :column="2" :colon="false">
              <el-descriptions-item label="地址:">{{ detailData.address }}</el-descriptions-item>
              <el-descriptions-item label="当前上刊率:">{{ detailData.publish_rate || 0 }} %<span
                class="text-gray text-xs"
              >（含可移动：{{ detailData.publish_rate_with_movable || 0 }}%）</span>
              </el-descriptions-item>
              <el-descriptions-item label="点位:">
                {{
                  ((detailData.points || []).filter(item => (!!item.num)).map(item => {
                    return item.name + '(' + item.num + ')'
                  })).join('、')
                }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <el-select v-model="publishCustomerCountSelected" filterable placeholder="请选择" size="mini"
                             style="width:75px" class="top-box-select"
                  >
                    <el-option label="今年" :value="1"/>
                    <el-option label="本季度" :value="2"/>
                  </el-select>
                  上刊客户:
                </template>
                <div style="line-height: 28px;">0 个</div>
              </el-descriptions-item>
              <el-descriptions-item v-if="detailData.type_id==78" label="均价:">
                {{ detailData.price }} 元/平米
              </el-descriptions-item>
              <el-descriptions-item v-else label=""/>
              <el-descriptions-item>
                <template slot="label">
                  <el-select v-model="publishWorthSelected" filterable placeholder="请选择" size="mini" style="width:75px"
                             class="top-box-select"
                  >
                    <el-option label="今年" :value="1"/>
                    <el-option label="本季度" :value="2"/>
                  </el-select>
                  总计价值:
                </template>
                <div style="line-height: 28px;">0.00 元</div>
              </el-descriptions-item>
              <el-descriptions-item v-if="detailData.type_id==78" label="规模:">
                {{ detailData.scale }} 人 <span class="text-gray text-xs">（{{ detailData.occupancy_rate || 0 }}%）</span>
              </el-descriptions-item>
              <el-descriptions-item v-else label=""/>
              <el-descriptions-item>
                <template slot="label">
                  <el-select v-model="publishWorthPerPointSelected" filterable placeholder="请选择" size="mini"
                             style="width:75px" class="top-box-select"
                  >
                    <el-option label="今年" :value="1"/>
                    <el-option label="本季度" :value="2"/>
                  </el-select>
                  平均价值:
                </template>
                <div style="line-height: 28px;">0.00 元/点位</div>
              </el-descriptions-item>
              <el-descriptions-item label="电梯数:">{{ detailData.elevator_count }}</el-descriptions-item>
              <el-descriptions-item label="电梯类型:">{{ detailData.elevator_type == 1 ? '双梯':'单梯'}}</el-descriptions-item>
              <el-descriptions-item label="覆盖人群:">{{ detailData.cover_people_count }} 人</el-descriptions-item>
              <el-descriptions-item label="覆盖周边:" :span="2">{{ detailData.cover_location }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-card shadow="always" style="height: 100%;" class="photo-card">
            <div slot="header">
              <span>楼盘照片</span>
            </div>
            <div class="flex flex-direction justify-center align-center flex-no-wrap" style="width:100%;height:100%">
              <el-image style="width: 100%; height: 100%" :src="detailData.photo" fit="scale-down">
                <div slot="error" class="flex justify-center align-center text-gray flex-no-wrap"
                     style="width: 100%; height: 100%;background-color: rgb(245, 247, 250);">
                  无照片
                </div>
              </el-image>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <span>点位详情</span>
        </div>
        <div class="">
          <el-row class="text-bold-header">
            <div style="position: relative">
              共计<span style="color:#70D785">{{ pointData.freeCount }}</span>个空闲点位，已上刊<span
              style="color:#EB8089"
            >{{ pointData.optionalCount }}</span>个点位，<span
              style="color: #F7EB86"
            >{{ pointData.lockCount }}</span>个锁定点位,<span
              style="color: #333333"
            >{{ pointData.abnormalCount }}</span>个异常点位
              <!-- 搜索框-->

            </div>
            <div style="position: absolute;top:-5px;left:370px;">
              <el-form ref="searchForm" :inline="true" :model="searchForm" size="mini" class="form-inline">
                <el-col :span="24">
                  <el-form-item prop="code">
                    <el-input v-model.trim="searchForm.code" clearable size="mini" style="width: 120px;"
                              placeholder="请输入编码"
                    />
                  </el-form-item>
                  <el-form-item v-if="detailData.type_id == 82" prop="ab_type_id">
                    <el-select v-model="searchForm.ab_type_id" clearable placeholder="请选择a面或b面">
                      <el-option label="a面" :value="57"/>
                      <el-option label="b面" :value="58"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="detailData.type_id == 78" prop="building_number">
                    <el-input v-model.trim="searchForm.building_number" clearable size="mini" style="width: 120px;"
                              placeholder="请输入楼号"
                    />
                  </el-form-item>
                  <el-form-item v-if="detailData.type_id == 78" prop="unit_number">
                    <el-input v-model.trim="searchForm.unit_number" clearable size="mini" style="width: 120px;"
                              placeholder="请输入单元号"
                    />
                  </el-form-item>
                  <el-form-item v-if="detailData.type_id == 78" prop="floor">
                    <el-input v-model.trim="searchForm.floor" clearable size="mini" style="width: 120px;"
                              placeholder="请输入楼层"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="searchSubmit('searchForm')">搜索</el-button>
                    <el-button type="info" @click="searchReset('searchForm')">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
            <div style="position: absolute;top:0;right:0">
              <div class="text-bold-header-tip" style="width:10px;height:10px;background-color: #EB8089"/>
              <div class="text-bold-header-tip" style="margin-right: 20px">已上刊</div>
              <div class="text-bold-header-tip" style="width:10px;height:10px;background-color: #F7EB86"/>
              <div class="text-bold-header-tip" style="margin-right: 20px">锁定中</div>
              <div class="text-bold-header-tip" style="width:10px;height:10px;background-color: #70D785"/>
              <div class="text-bold-header-tip" style="margin-right: 20px">空刊中</div>
              <div class="text-bold-header-tip" style="width:10px;height:10px;background-color: #333333"/>
              <div class="text-bold-header-tip" style="margin-right: 20px">异常中</div>
            </div>
          </el-row>
          <el-row style="margin-top: 10px">
            <div class="text-bold-body">
              <el-row type="flex" style="flex-wrap: wrap;">
                <!--住宅-->
                <div v-for="(item,index) in houseData.pointList" v-if="detailData.type_id == 78" :key="index">
                  <div>
                    <div class="text-bold-body-item">
                      <el-row type="flex" style="flex-wrap: wrap;">
                        <div v-for="(unit,i) in item.unitList" :key="i" style="margin: 0 10px">
                          <div class="building-box">
                            <div style="border-radius: 10px;border: 1px dashed #c9cbce;">
                              <div v-for="(floor,floorIndex) in unit.floorList" :key="floorIndex" class="floor-box"
                                   :class="floorIndex ==0?'floor-box-first':floorIndex==unit.floorList.length-1?'floor-box-last':''"
                              >
                                <div class="floor-box-num" style="float: left;line-height: 30px">
                                  {{ floor.floorName }}F
                                </div>
                                <div class="floor-box-point-box">
                                  <div v-for="(point,pointIndex) in floor.pointInformationList" :key="pointIndex"
                                       class="floor-box-point"
                                  >
                                    <!--1：空刊中 2：锁定中 3：已上刊-->
                                    <el-popover placement="top" width="360" trigger="hover" :open-delay="300">
                                      <div style="text-align: center; margin: 0">
                                        <el-button type="warning" size="mini" @click="showVotingDialog(point.id)">禁投
                                        </el-button>
                                        <el-button type="primary" size="mini" @click="edit(point.id)">编辑</el-button>
                                        <el-button type="danger" size="mini" @click.native="onDel(point.id)">注销</el-button>
                                        <el-button type="info" size="mini" v-if="point.hasOwnProperty('abnormal') && point.abnormal == 0" @click.native="abnormal(point.id,true)">设成异常</el-button>
                                        <el-button type="info" size="mini" v-if="point.hasOwnProperty('abnormal') && point.abnormal == 1" @click.native="abnormal(point.id)">设成正常</el-button>
                                      </div>
                                      <div slot="reference" class="floor-box-point-block " style="cursor: pointer;"
                                           :class="point.lock_status==3?'floor-box-point-block-greenyellow':point.lock_status==2?'floor-box-point-block-yellow':point.lock_status==1?'floor-box-point-block-red':(point.hasOwnProperty('abnormal') && point.abnormal == 1) ? 'floor-box-point-block-gray': 'floor-box-point-block-greenyellow'"
                                      >
                                        <div class="code-box">{{ point.code }}</div>
                                      </div>
                                    </el-popover>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div style="text-align: center;margin: 10px 0">
                              <div class="unit-box">
                                {{ unit.unitName }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-row>
                    </div>
                  </div>
                  <div style="display: block;clear: both"/>
                  <div>
                    <div class="building-box-name">{{ item.buildingName }}</div>
                  </div>
                </div>
                <!--综合市场-->
                <div v-for="(item,index) in marketData.pointList" v-if="detailData.type_id == 82" :key="index"
                     :span="3"
                >
                  <div style="margin:10px 10px 10px 0;padding: 10px;border-radius: 10px;border: 1px dashed #c9cbce; ">
                    <el-row type="flex" style="flex-wrap: wrap;">
                      <div v-for="(tmp,i) in item.unitList" :key="i" style="margin:0 10px;">
                        <el-popover placement="top" width="360" trigger="hover" :open-delay="300">
                          <div style="text-align: center; margin: 0">
                            <el-button type="warning" size="mini" @click="showVotingDialog(tmp.id)">禁投</el-button>
                            <el-button type="primary" size="mini" @click="editMarket(tmp.id)">编辑</el-button>
                            <el-button type="danger" size="mini" @click.native="onDel(tmp.id)">注销</el-button>
                            <el-button type="info" size="mini" v-if="tmp.hasOwnProperty('abnormal') && tmp.abnormal == 0" @click.native="abnormal(tmp.id,true)">设成异常</el-button>
                            <el-button type="info" size="mini" v-if="tmp.hasOwnProperty('abnormal') && tmp.abnormal == 1" @click.native="abnormal(tmp.id)">设成正常</el-button>
                          </div>
                          <div slot="reference">
                            <div class="floor-box-point-block"
                                 style="text-align: center;line-height: 30px;  cursor: pointer;"
                                 :class="tmp.lock_status==3?'floor-box-point-block-greenyellow':tmp.lock_status==2?'floor-box-point-block-yellow':tmp.lock_status == 1?'floor-box-point-block-red':(tmp.hasOwnProperty('abnormal') && tmp.abnormal == 1) ? 'floor-box-point-block-gray':'floor-box-point-block-greenyellow'"
                            >
                              <div class="code-box">{{ tmp.code }}</div>
                            </div>
                            <span style="margin-left: 20px; color: #7eb2ea;">{{
                                tmp.ab_type_id == 57 ? 'A面' : 'B面'
                              }}</span>
                          </div>
                        </el-popover>
                      </div>
                    </el-row>
                  </div>
                </div>
                <!--其他-->
                <div v-for="(item,index) in pointData.pointList"
                     v-if="detailData.type_id == 79||detailData.type_id == 80||detailData.type_id == 81||detailData.type_id == 83||
                       detailData.type_id == 84||detailData.type_id == 85" :key="index"
                >
                  <div style="margin: 10px 10px 10px 0">
                    <el-popover placement="top" width="360" trigger="hover" :open-delay="300">
                      <div style="text-align: center; margin: 0">
                        <el-button type="warning" size="mini" @click="showVotingDialog(item.id)">禁投</el-button>
                        <el-button type="primary" size="mini" @click="editCommon(item.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click.native="onDel(item.id)">注销</el-button>
                        <el-button type="info" size="mini" v-if="item.hasOwnProperty('abnormal') && item.abnormal == 0" @click.native="abnormal(item.id,true)">设成异常</el-button>
                        <el-button type="info" size="mini" v-if="item.hasOwnProperty('abnormal') && item.abnormal == 1" @click.native="abnormal(item.id)">设成正常</el-button>
                      </div>
                      <div slot="reference" class="floor-box-point-block"
                           style="text-align: center;line-height: 30px; cursor: pointer;"
                           :class="item.lock_status==3?'floor-box-point-block-greenyellow':item.lock_status==2?'floor-box-point-block-yellow':item.lock_status==2?'floor-box-point-block-red':(item.hasOwnProperty('abnormal') && item.abnormal == 1) ? 'floor-box-point-block-gray':'floor-box-point-block-greenyellow'"
                      >
                        <div class="code-box">{{ item.code }}</div>
                      </div>
                    </el-popover>
                  </div>
                </div>
              </el-row>
            </div>
          </el-row>
        </div>
      </el-card>
    </el-main>

    <el-dialog width="80%" title="编辑" center :visible.sync="dialogCommon">
      <el-form ref="commonForm" v-loading="dialogLoading" size="mini" :rules="commonRules" :model="commonForm"
               label-width="150px"
               center
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.code" clearable placeholder="请输入编号"/>
              </el-col>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id !== 11" label="画面属性" prop="pic_type_id">
              <el-select v-model="commonForm.pic_type_id" clearable placeholder="请选择画面属性" style="width:100%">
                <el-option v-for="item in pic_types" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id !== 11" label="内部尺寸_宽(cm)" prop="size_width_inside">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_width_inside" clearable placeholder="请输入内部尺寸_宽(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id !== 11" label="内部尺寸_高(cm)" prop="size_height_inside">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_height_inside" clearable placeholder="请输入内部尺寸_高(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id === 11" label="方向" prop="direction">
              <el-col :span="24">
                <el-select v-model="commonForm.direction" style="width: 100%" clearable placeholder="请选择方向">
                  <el-option value="横向"/>
                  <el-option value="竖向"/>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id === 11" label="颜色模式" prop="color_mode">
              <el-col :span="24">
                <el-select v-model="commonForm.color_mode" style="width: 100%" clearable placeholder="请选择颜色模式">
                  <el-option v-for="item in colorModeArr" :key="item.id" :value="item.id" :label="item.name">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item style="margin-bottom: 0" v-if="commonForm.media_type_id === 11" label="分辨率"
                          prop="resolving_power_value"
            >
              <el-form-item style="display: inline-block;width: 50%;padding-right: 15px;"
                            v-if="commonForm.media_type_id === 11"
                            prop="resolving_power_value"
              >
                <el-input v-model="commonForm.resolving_power_value" placeholder="请输入分辨率"></el-input>
              </el-form-item>
              <el-form-item style="display: inline-block;width: 50%;" v-if="commonForm.media_type_id === 11"
                            prop="resolving_power"
              >
                <el-select v-model="commonForm.resolving_power" style="width: 100%" clearable placeholder="请选择分辨率单位">
                  <el-option v-for="item in resolvingPowerArr" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id === 11" label="开启时间" prop="opening_time">
              <el-col :span="24">
                <el-time-picker v-model="commonForm.opening_time" value-format="HH-mm-ss" placeholder="请选择开启时间"/>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="commonForm.media_type_id===11?'宽(cm)':'外部尺寸_宽(cm)'" prop="size_width">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_width" clearable placeholder="请输入外部尺寸_宽(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item :label="commonForm.media_type_id===11?'高(cm)':'外部尺寸_高(cm)'" prop="size_height">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_height" clearable placeholder="请输入外部尺寸_高(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item v-if="detailData.type_id==81 || detailData.type_id == 79" label="媒体类型：" prop="media_type_id">
              <el-select v-model="commonForm.media_type_id" clearable placeholder="请选择媒体属性" style="width:100%" @change="handleMediaTypeChange">
                <el-option v-for="item in media_ids" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="规格" prop="media_type_specs_id">
              <el-select v-model="commonForm.media_type_specs_id" clearable placeholder="请选择规格" style="width:100%">
                <el-option v-for="item in media_specs_list" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id === 11" label="颜色位数" prop="color_bits">
              <el-col :span="24">
                <el-select v-model="commonForm.color_bits" style="width: 100%" clearable placeholder="请选择颜色位数">
                  <el-option v-for="item in colorBitsArr" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id === 11" label="视频格式" prop="video_format">
              <el-col :span="24">
                <el-select v-model="commonForm.video_format" style="width: 100%" clearable placeholder="请选择视频格式">
                  <el-option v-for="item in videoFormatArr" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item v-if="commonForm.media_type_id === 11" label="关闭时间" prop="closing_time">
              <el-col :span="24">
                <!--                <el-select v-model="commonForm.closing_time" style="width: 100%" clearable placeholder="请选择关闭时间" />-->
                <el-time-picker v-model="commonForm.closing_time" placeholder="结束时间" value-format="HH-mm-ss"/>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="位置" prop="location">
          <el-col :span="22">
            <el-input v-model="commonForm.location" type="textarea" :autosize="{ minRows: 4}" placeholder="请输入位置"/>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="dialogCommon=false">取 消</el-button>
        <el-button type="primary" @click.native="onSubmitCommon()">确 定</el-button>
        <el-button type="danger" @click.native="onDel(commonForm.id)">注 销</el-button>
      </span>
    </el-dialog>

    <el-dialog width="80%" title="编辑" center :visible.sync="dialogBuilding">
      <el-form ref="commonForm" v-loading="dialogLoading" size="mini" :rules="commonRules" :model="commonForm"
               label-width="150px"
               center
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.code" clearable placeholder="请输入编号"/>
              </el-col>
            </el-form-item>
            <el-form-item label="画面属性" prop="pic_type_id">
              <el-select v-model="commonForm.pic_type_id" clearable placeholder="请选择画面属性" style="width:100%">
                <el-option v-for="item in pic_types" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="楼层类型" prop="building_type">
              <el-select v-model="commonForm.building_type" clearable placeholder="请选择楼层类型" style="width:100%">
                <el-option v-for="item in building_types" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="单元号" prop="unit_number">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.unit_number" clearable placeholder="请输入单元号"/>
              </el-col>
            </el-form-item>
            <el-form-item label="内部尺寸_宽(cm)" prop="size_width_inside">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_width_inside" clearable placeholder="请输入内部尺寸_宽(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item label="内部尺寸_高(cm)" prop="size_height_inside">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_height_inside" clearable placeholder="请输入内部尺寸_高(cm)"/>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="尺寸_宽(cm)" prop="size_width">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_width" clearable placeholder="请输入尺寸_宽(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item label="尺寸_高(cm)" prop="size_height">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_height" clearable placeholder="请输入尺寸_高(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item label="楼号" prop="building_number">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.building_number" clearable placeholder="请输入楼号"/>
              </el-col>
            </el-form-item>
            <el-form-item label="层数" prop="floor">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.floor" clearable placeholder="请输入层数"/>
              </el-col>
            </el-form-item>
            <el-form-item label="规格" prop="media_type_specs_id">
              <el-select v-model="commonForm.media_type_specs_id" clearable placeholder="请选择规格" style="width:100%">
                <el-option v-for="item in media_specs_list" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="位置" prop="location">
          <el-col :span="22">
            <el-input v-model="commonForm.location" type="textarea" :autosize="{ minRows: 4}" placeholder="请输入位置"/>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="dialogBuilding=false">取 消</el-button>
        <el-button type="primary" @click.native="onSubmitCommon()">确 定</el-button>
        <!--        <el-button type="danger" @click.native="onDel(commonForm.id)">注 销</el-button>-->
      </span>
    </el-dialog>

    <el-dialog width="80%" title="编辑" center :visible.sync="dialogMarket">
      <el-form ref="commonForm" v-loading="dialogLoading" size="mini" :rules="commonRules" :model="commonForm"
               label-width="150px"
               center
      >
        <div v-if="commonForm.ab_type_id==57">A面：</div>
        <div v-if="commonForm.ab_type_id==58">B面：</div>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.code" clearable placeholder="请输入编号"/>
              </el-col>
            </el-form-item>
            <el-form-item label="画面属性" prop="pic_type_id">
              <el-select v-model="commonForm.pic_type_id" clearable placeholder="请选择画面属性" style="width:100%">
                <el-option v-for="item in pic_types" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否亮灯" prop="is_light">
              <el-col :span="24">
                <el-select v-model="commonForm.is_light" clearable placeholder="请选择">
                  <el-option label="不亮" :value="false"/>
                  <el-option label="亮灯" :value="true"/>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="规格" prop="media_type_specs_id">
              <el-select v-model="commonForm.media_type_specs_id" clearable placeholder="请选择规格" style="width:100%">
                <el-option v-for="item in media_specs_list" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="外部尺寸_宽(cm)" prop="size_width">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_width" clearable placeholder="请输入外部尺寸_宽(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item label="外部尺寸_高(cm)" prop="size_height">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_height" clearable placeholder="请输入外部尺寸_高(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item label="内部尺寸_宽(cm)" prop="size_width_inside">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_width_inside" clearable placeholder="请输入内部尺寸_宽(cm)"/>
              </el-col>
            </el-form-item>
            <el-form-item label="内部尺寸_高(cm)" prop="size_height_inside">
              <el-col :span="24">
                <el-input v-model.trim="commonForm.size_height_inside" clearable placeholder="请输入内部尺寸_高(cm)"/>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="位置" prop="location">
          <el-col :span="22">
            <el-input v-model="commonForm.location" type="textarea" :autosize="{ minRows: 4}" placeholder="请输入位置"/>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="dialogMarket=false">取 消</el-button>
        <el-button type="primary" @click.native="onSubmitCommon()">确 定</el-button>
        <el-button type="danger" @click.native="onDel(commonForm.id)">注 销</el-button>
      </span>
    </el-dialog>

    <el-dialog width="80%" title="禁投" center :visible.sync="noVotingDialogVisible" @close="tmpPointId = null">
      <el-button type="primary" size="mini" style="margin-bottom: 10px" @click="showCreateNoVotingDialog">添加禁投
      </el-button>
      <el-table v-loading="noVotingTableLoading" :data="noVotingData" size="mini" stripe border>、
        <el-table-column type="index" width="50" label="序号" align="center"/>
        <el-table-column prop="type_name" width="200" label="类型" align="center"/>
        <el-table-column label="开始时间" prop="start_at" align="center"/>
        <el-table-column label="结束时间" prop="end_at" align="center"/>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-button v-if="scope.row.type==4" type="danger" size="mini"
                       @click="release_manual_lock(scope.row.choose_id)"
            >释放
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="noVotingDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog width="30%" title="添加禁投时间" center :visible.sync="createNoVotingDateRangeVisible"
               @close="cuForm.date_range = []"
    >
      <div style="text-align: center">
        <el-form ref="cuForm" size="mini" :model="cuForm">
          <el-form-item label="禁投时间" prop="date_range"
                        :rules="[{ required: true, message: '请选择禁投时间', trigger: 'change' }]"
          >
            <el-date-picker
              v-model="cuForm.date_range"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              format="yyyy年MM月dd日"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="createNoVotingDateRangeVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="createNoVoting">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="异常点位" :visible.sync="abnormalDialogVisible" width="300px" center @close="closeAbnormalDialog">
      <el-form size="mini" style="width: 260px;margin: 0 auto">
        <el-form-item label="异常原因">
          <el-radio-group v-model="abnormalReason">
            <el-radio :label="1">点位拆除</el-radio>
            <el-radio :label="2">点位暂停</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="abnormalDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="set2Abnormal">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import { detail, get_media_type_id, get_media_types, list_media_types_of_gas_station } from '@/api/building/building'
import { checkABCode, checkCode, del, edit, list, oneDetail, special_list,abnormal } from '@/api/point/point'
import { media_specs_list } from '@/api/media/specs'
import { formatDate } from '@/utils/util.js'
import { cloneDeep } from 'lodash'
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import common from '@/utils/common.js'
import { Message } from 'element-ui'
import { list_lock_media_id, release_manual_lock, submit_manual_lock } from '@/api/point/media'

export default {
  name: 'BuildingAreaDetail',
  components: {},
  data() {
    var validateCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('编码不能为空'))
      }
      this.checkCode(value, this.edidId)

      if (value != null && value != '') {
        this.checkABCode(value, this.edidId)
      }
      setTimeout(() => {
        if (!this.isRepeat) {
          callback(new Error('此编码已存在'))
        } else {
          callback()
        }
      }, 500)
    }
    var chackTime = (rule, value, callback) => {
      if (this.commonForm.opening_time !== null && this.commonForm.closing_time != null) {
        let openTime = this.commonForm.opening_time.toString().split('-')
        let closeTime = this.commonForm.closing_time.toString().split('-')
        let flag
        if (openTime[0] < closeTime[0]) {
          flag = true
        } else if (openTime[1] < closeTime[1]) {
          flag = true
        } else if (openTime[2] < closeTime[2]) {
          flag = true
        } else {
          flag = false
        }
        if (flag) {
          callback()
        } else {
          callback(new Error('结束时间需要大于开启时间'))
        }
      } else {
        callback()
      }
    }
    return {
      id: null,
      old_code: null,
      edidId: null, // 编辑的数据id
      detail: {
        title: [],
        devices: {},
        all_devices: {},
        media_type_nums: {},
        to_check: {},
        new_install: []
      },
      dialogCommon: false,
      dialogLoading: false,
      dialogBuilding: false,
      dialogMarket: false,
      building_area_type_id: null,
      commonForm: {
        id: null,
        code: null,
        pic_type_id: null,
        media_type_id: null,
        ab_type_id: null,
        building_type: null,
        building_number: null,
        unit_number: null,
        floor: null,
        door_number: null,
        location: null,
        size_width: null,
        size_height: null,
        size_width_inside: null,
        size_height_inside: null,
        is_light: null,
        media_type_specs_id: null,
        direction: null,
        resolving_power: null,
        resolving_power_value: null,
        color_mode: null,
        color_bits: null,
        opening_time: null,
        closing_time: null,
        video_format: null
      },
      // 点位类型
      media_types: [],
      media_specs_list: [],
      media_types_map: new Map(),
      searchForm: {
        code: null, // 编号
        building_type: null, // 楼层类型
        building_number: null, // 楼号
        unit_number: null, // 单元号
        floor: null, // 楼层
        ab_type_id: null // a/b面
      },
      listParams: {
        code: null,
        building_type: null,
        building_number: null,
        unit_number: null,
        floor: null,
        ab_type_id: null
      },
      commonRules: {
        code: [{
          validator: validateCode,
          trigger: 'blur'
        }],
        // location: [{
        //   required: true,
        //   message: '请输入位置',
        //   trigger: 'blur'
        // }],
        pic_type_id: [{
          required: true,
          message: '请选择画面属性',
          trigger: 'blur'
        }],
        floor: [{
          required: true,
          message: '层数不能为空',
          trigger: 'blur'
        }],
        building_type: [{
          required: true,
          message: '请选择楼层类型',
          trigger: 'blur'
        }],
        media_type_specs_id: [{
          required: true,
          message: '请选择规格',
          trigger: 'blur'
        }],
        building_number: [{
          required: true,
          message: '楼号不能为空',
          trigger: 'blur'
        }],
        unit_number: [{
          required: true,
          message: '单元号不能为空',
          trigger: 'blur'
        }],
        size_width: [{
          required: true,
          message: '对外宽不能为空',
          trigger: 'blur'
        }, {
          pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
          message: '请输入合法数字(支持2位小数)',
          trigger: 'blur'
        }],
        size_height: [{
          required: true,
          message: '对外高不能为空',
          trigger: 'blur'
        }, {
          pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
          message: '请输入合法数字(支持2位小数)',
          trigger: 'blur'
        }],
        size_width_inside: [{
          required: true,
          message: '对内宽不能为空',
          trigger: 'blur'
        }, {
          pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
          message: '请输入合法数字(支持2位小数)',
          trigger: 'blur'
        }],
        size_height_inside: [{
          required: true,
          message: '对内高不能为空',
          trigger: 'blur'
        }, {
          pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
          message: '请输入合法数字(支持2位小数)',
          trigger: 'blur'
        }],
        direction: [{
          required: true,
          message: '方向不能为空',
          trigger: 'change'
        }],
        resolving_power: [{
          required: true,
          message: '分辨率单位不能为空',
          trigger: 'change'
        }],
        resolving_power_value: [{
          required: true,
          message: '分辨率不能为空',
          trigger: 'blur'
        }],
        color_mode: [{
          required: true,
          message: '颜色模式不能为空',
          trigger: 'change'
        }],
        color_bits: [{
          required: true,
          message: '颜色位数不能为空',
          trigger: 'change'
        }],
        opening_time: [{
          required: true,
          message: '开启时间不能为空',
          trigger: 'change'
        }],
        closing_time: [{
          required: true,
          message: '关闭时间不能为空',
          trigger: 'change'
        }, { validator: chackTime, trigger: 'blur' }],
        video_format: [{
          required: true,
          message: '视频格式不能为空',
          trigger: 'change'
        }]
      },
      pic_types: [],
      building_types: [{
        id: 1,
        name: '多层'
      },
        {
          id: 2,
          name: '高层'
        }
      ],
      media_id: null,
      media_ids: [],
      publishCustomerCountSelected: 1,
      publishWorthSelected: 1,
      publishWorthPerPointSelected: 1,
      detailData: {
        type_id: null
      },
      /**
       * 住宅测试数据
       */
      houseData: {
        freeCount: 0, // 空闲点位个数
        lockCount: 0, // 锁定点位个数
        optionalCount: 0, // 可选点位个数
        abnormalCount: 0, // 异常点位个数
        pointList: [ // 点位信息集合
        ]
      },
      /**
       * 综合市场测试数据
       */
      marketData: {
        freeCount: 0, // 空闲点位个数
        lockCount: 0, // 锁定点位个数
        optionalCount: 0, // 可选点位个数
        abnormalCount: 0,
        pointList: []
      },
      /**
       * 其他类型测试数据
       */
      pointData: {
        freeCount: 0, // 空闲点位个数
        lockCount: 0, // 锁定点位个数
        optionalCount: 0, // 可选点位个数
        abnormalCount: 0, // 异常点位个数
        pointList: []
      },
      noVotingDialogVisible: false,
      noVotingData: [],
      tmpPointId: null,
      cuForm: {
        media_point_id: null,
        date_range: []
      },
      createNoVotingDateRangeVisible: false,
      noVotingTableLoading: false,
      pickerOptions: {
        disabledDate(time) {
          return new Date(formatDate(time)) < new Date(formatDate(new Date()))
        }
      },
      videoFormatArr: [],
      colorBitsArr: [],
      colorModeArr: [],
      resolvingPowerArr: [],
      abnormalDialogVisible: false,
      abnormalId: null,
      abnormalReason: null,
    }
  },
  computed: {},
  created() {
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)
    this.id = (params || {}).id
    this.initVideoFormatArr()
    this.initColorBitsArr()
    this.initColorModeArr()
    this.initResolvingPowerArr()
  },
  mounted() {
	  const that = this;
    that.getDetail().then(() => {
		that.getPointDetail()
	})
    that.getPicTypes()
    that.getMediaIds()
  },
  methods: {
    abnormal(id,flag) {
      this.$confirm('确认要设置此点位吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        if (flag){
          this.abnormalDialogVisible = true
          this.abnormalId = id
          this.abnormalReason = null
        }else {
          abnormal({id})
            .then(res => {
              const {
                code,
                message
              } = res
              if (code === 200) {
                common.message({
                  message
                })
                this.getPointDetail()
                this.dialogCommon = false
                this.dialogBuilding = false
                this.dialogMarket = false
              }
            })
        }
      }).catch(() => {
        return false
      })
    },
    closeAbnormalDialog(){
      this.abnormalDialogVisible = false
      this.abnormalId = null
      this.abnormalReason = null
    },
    set2Abnormal(){
      let id = this.abnormalId
      let reason = this.abnormalReason
      if (reason == null){
        Message.error('请选择异常原因')
        return false
      }
      abnormal({id,reason})
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            common.message({
              message
            })
            this.closeAbnormalDialog()
            this.getPointDetail()
            this.dialogCommon = false
            this.dialogBuilding = false
            this.dialogMarket = false
          }
        })
    },
    getDetail() {
      const that = this
      return detail({
        id: that.id
      })
        .then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            that.detailData = cloneDeep(data)
          }
        })
    },

    getPointDetail() {
      const that = this
      const type_id = that.detailData.type_id

      that.building_area_type_id = type_id
      that.getSpecsList()

      if (type_id == 78) {
        this.listParams.building_area_id = that.id
        special_list(this.listParams).then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            this.pointData.freeCount = data.freeCount
            this.pointData.lockCount = data.lockCount
            this.pointData.optionalCount = data.optionalCount
            this.pointData.abnormalCount = data.abnormalCount
            this.houseData.pointList = cloneDeep(data.mediaPointHouseList)
          }
        })
      } else if (type_id == 82) {
        this.listParams.building_area_id = that.id
        special_list(this.listParams).then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            this.pointData.freeCount = data.freeCount
            this.pointData.lockCount = data.lockCount
            this.pointData.optionalCount = data.optionalCount
            this.pointData.abnormalCount = data.abnormalCount
            this.marketData.pointList = cloneDeep(data.mediaPointAbVO)
          }
        })
      } else {
        this.listParams.building_area_id = that.id
        list(this.listParams).then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            this.pointData.freeCount = data.freeCount
            this.pointData.lockCount = data.lockCount
            this.pointData.optionalCount = data.optionalCount
            this.pointData.abnormalCount = data.abnormalCount
            this.pointData.pointList = cloneDeep(data.mediaPointList)
          }
        })
      }
    },
    getMediaTypeId(id) {
      const that = this
      return new Promise((resolve, reject) => {
        get_media_type_id({ building_area_type_id: id })
          .then(res => {
            const {
              code,
              data
            } = res
            if (code == 200) {
              that.media_id = data
              resolve()
            }
          })
          .catch(() => {
            resolve(null)
          })
      })
    },
    async getSpecsList() {
      const that = this
      await that.getMediaTypeId(that.building_area_type_id)
      this.getMediaSpecsList(that.media_id)
    },
    handleMediaTypeChange(val){
      this.commonForm.media_type_specs_id = null
      this.media_id = val
      if(val) this.getMediaSpecsList(val)
      else this.media_specs_list = []
    },
    getMediaSpecsList(mediaTypeId){
      var obj = Object.assign({}, {
        mediaTypeId: mediaTypeId,
        page: 1,
        page_size: 100
      })
      media_specs_list(obj)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            this.media_specs_list = res.data.records
          }
        })
        .catch(() => {

        })
    },
    edit(id) {
      const that = this
      that.old_code = null
      that.resetPointForm()
      that.getOneDetail(id)
      that.edidId = id
      that.dialogBuilding = true
      that.$refs['commonForm'] && that.$refs['commonForm'].clearValidate()
      that.dialogPointLoading = false
    },
    editMarket(id) {
      const that = this
      that.old_code = null
      that.resetPointForm()
      that.getOneDetail(id)
      that.edidId = id
      that.dialogMarket = true
      that.$refs['commonForm'] && that.$refs['commonForm'].clearValidate()
      that.dialogPointLoading = false
    },
    editCommon(id) {
      const that = this
      that.old_code = null
      that.resetPointForm()
      that.getOneDetail(id)
      that.edidId = id
      that.dialogCommon = true
      that.$refs['commonForm'] && that.$refs['commonForm'].clearValidate()
      that.dialogPointLoading = false
    },
    // 根据点位id获取详情
    getOneDetail(id) {
      oneDetail(id)
        .then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            const type_id = this.detailData.type_id
            this.old_code = data.code
            if (type_id == 82) {
              this.commonForm = data
            } else {
              this.commonForm = data
              this.getMediaSpecsList(data.media_type_id)
            }
          }
        })
    },
    getPicTypes() {
      const that = this
      return list_all3rd_bycode({
        code: 'dwxg-hmsx'
      })
        .then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            that.pic_types = data
          }
        })
    },

    // 获取点位类型
    getMediaTypes() {
      const that = this
      return get_media_types()
        .then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            that.media_types = data || []
            that.media_types_map = new Map();
            (data || []).forEach(d => {
              that.media_types_map.set(parseInt(d.id), d)
              that.$set(that.cuForm.media_types, '' + d.id, 0)
            })
          }
        })
    },

    getMediaIds() {
      const that = this
      return list_media_types_of_gas_station()
        .then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            that.media_ids = data || []
          }
        })
    },
    // 搜索
    searchSubmit() {
      this.$refs['searchForm'].validate(valid => {
        if (valid) {
          const params = this.$refs['searchForm'].model
          this.listParams = Object.assign(this.listParams, params)
          this.getPointDetail()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置搜索表单
    searchReset() {
      this.$refs.searchForm.resetFields()
      const params = this.$refs.searchForm.model
      this.listParams = Object.assign(this.listParams, params)
      this.getPointDetail()
    },
    // 提交编辑
    onSubmitCommon() {
      this.$refs.commonForm.validate(valid => {
        // ~ 校验通过
        if (valid) {
          var obj = Object.assign({}, this.commonForm)
          if (this.media_id == 9) {
            if (this.checkValid(obj.code) == false) {
              return false
            }
            if (this.isABRepeat != null && this.isABRepeat == false) {
              Message.error('该项目点位已存在此字母开头编码，请换一个')
              return false
            }
          }

          // console.log(11111,obj)
          // return  false
          // 显示loading
          this.dialogLoading = true
          // ~~ 修改
          this.onEdit(obj)
        } else {
          // ~ 不通过
          return false
        }
      })
    },
    onEdit(obj) {
      obj.old_code = this.old_code
      return edit(obj)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code == 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            this.getPointDetail()
            this.dialogCommon = false
            this.dialogBuilding = false
            this.dialogMarket = false
          }
          this.dialogLoading = false
        })
        .catch(() => {
          this.dialogLoading = false
        })
    },
    // 注销点位
    onDel(id) {
      this.$confirm('确认要注销此点位吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          del({
            id
          })
            .then(res => {
              const {
                code,
                message
              } = res
              if (code === 200) {
                common.message({
                  message
                })
                this.getPointDetail()
                this.dialogCommon = false
                this.dialogBuilding = false
                this.dialogMarket = false
              }
            })
        }).catch(() => {
        return false
      })
    },
    // 校验code唯一
    checkCode(code, id) {
      return checkCode({
        'code': code,
        'id': id
      })
        .then(res => {
          const {
            data
          } = res
          this.isRepeat = data
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    checkABCode(code, id) {
      const that = this
      return checkABCode({
        'code': code,
        'id': id,
        'building_area_id': that.id
      })
        .then(res => {
          const {
            data
          } = res
          this.isABRepeat = data
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    checkValid(code) {
      if (!code.includes('-')) {
        Message.error('编号不规范，请以大写字母加1(A面)或2(B面)加-开头，标准编码例如："A1-123"')
        return false
      }
      const start = code.split('-')
      if (/^[A-Z]{1}[1-9]{1}?$/.test(start[0]) == false) {
        Message.error('编号不规范，请以大写字母加数字(A面)或(B面)加-开头，标准编码例如："A1-123"')
        return false
      }
    },
    resetPointForm() {
      this.commonForm = {
        id: null,
        code: null,
        pic_type_id: null,
        media_type_id: null,
        ab_type_id: null,
        building_type: null,
        building_number: null,
        unit_number: null,
        floor: null,
        door_number: null,
        location: null,
        size_width: null,
        size_height: null,
        size_width_inside: null,
        size_height_inside: null,
        media_type_specs_id: null
      }
    },
    showVotingDialog(id) {
      this.tmpPointId = id
      this.noVotingDialogVisible = true
      this.getNoVotingData()
    },
    getNoVotingData() {
      this.noVotingTableLoading = true
      list_lock_media_id({ mediaId: this.tmpPointId }).then(res => {
        this.noVotingTableLoading = false
        this.noVotingData = res.data
      })
    },
    showCreateNoVotingDialog() {
      this.createNoVotingDateRangeVisible = true
      this.$nextTick(() => {
        this.$refs.cuForm.clearValidate()
      })
    },
    createNoVoting() {
      this.$refs.cuForm.validate(validate => {
        if (validate) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const req = {
            media_point_id: this.tmpPointId,
            start_at: this.cuForm.date_range[0],
            end_at: this.cuForm.date_range[1]
          }
          submit_manual_lock(req).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              this.createNoVotingDateRangeVisible = false
              this.getNoVotingData()
            }
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    release_manual_lock(id) {
      this.$confirm('确定释放此时间段的占用？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        release_manual_lock({ chooseId: id }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '释放成功!'
            })
            this.getNoVotingData()
          }
          loading.close()
        })
      }).catch(() => {
        loading.close()
      })
    },
    /**
     * 初始化颜色模式数组
     */
    initColorModeArr() {
      list_all3rd_bycode({ code: 'dwxg-ysms' }).then(res => {
        this.colorModeArr = res.data
      })
    },
    /**
     * 初始化颜色位数数组
     */
    initColorBitsArr() {
      list_all3rd_bycode({ code: 'dwxg-ysmsws' }).then(res => {
        this.colorBitsArr = res.data
      })
    },
    /**
     * 初始化视频格式数组
     */
    initVideoFormatArr() {
      list_all3rd_bycode({ code: 'dwxg-spgs' }).then(res => {
        this.videoFormatArr = res.data
      })
    },
    /**
     * 初始化分辨率数组
     */
    initResolvingPowerArr() {
      list_all3rd_bycode({ code: 'dwxg-fbl' }).then(res => {
        this.resolvingPowerArr = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-box {
  /deep/ .el-card__body {
    height: calc(100% - 55px);

    .top-table {
      width: calc(100% - 40px);
      height: 140px;
      table-layout: fixed;
      border-collapse: collapse;
      border: none;

      .first-col {
        width: calc(50% - 55px);
      }

      .second-col {
        width: calc(50% - 155px);
      }

      td {
        padding: 0;
        height: 35px;
      }

      td.td-value {
        font-size: 13px;
      }
    }
  }

  .top-box-select {
    /deep/ .el-input__inner {
      padding-left: 5px;
    }
  }
}

.photo-card {
  /deep/ .el-card__body {
    height: calc(100% - 55px);
  }
}

/deep/ .el-table {
  .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 2px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    display: block;
    width: 5px;
    margin: 0 auto;
    border-radius: 2px;
    background: #ddd;
  }
}

.title-icon {
  color: #777;
}

.media-search-select {
  width: 115px;
}

.to-check-tag {
  padding: 1px 2px;
  margin: 0;
  color: #f37b1d;
  border: 1px solid #f37b1d;
  background-color: #fde6d2;
  border-radius: 5px;
  font-size: 10px !important;
  line-height: 12px;
}

.one-device {
  position: relative;
  border: 1px solid #aaaaaa;
  border-radius: 10px;
  width: 100px;
  height: 100px;

  .one-device-to-check-tag-box {
    position: absolute;
    top: 2px;
    right: 2px;

    .to-check-tag:not(:last-child) {
      margin-bottom: 2px;
    }
  }
}

.one-device:hover {
  cursor: pointer;
  opacity: 0.6;
}

.qrcode {
  width: 100px !important;
  height: 100px !important;

  /deep/ img {
    width: 100px !important;
    height: 100px !important;
  }
}

.text-bold-header {
  font-size: 15px;
}

.text-bold-header-tip {
  display: inline-block;
  margin-right: 5px;
}

.text-bold-body {
  clear: both;
  width: 100%;
  //margin: 0 auto;
}

.text-bold-body:after {
  content: "";
  display: block;
  clear: both;
}

.text-bold-body-item {
  padding: 20px 20px 0 20px;
  font-size: 14px;
  border: 1px dashed #c9cbce;
  border-radius: 10px;
  margin: 20px 20px 5px 20px;
}

.text-bold-body-item:after {
  content: "";
  display: block;
  clear: both;
}

.building-box {
  // width: 230px;
  // max-width: 230px;
  border-radius: 10px;
}

.floor-box-last {
  border-bottom: none;
}

.floor-box-first {
  border-top: none !important;
}

.floor-box {
  border-top: 1px dashed #c9cbce;
  padding-top: 5px;
  padding-bottom: 5px;
}

.floor-box:after {
  content: "";
  display: block;
  clear: both;
}

.floor-box-point {
  width: 70px;
  text-align: center;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}

.floor-box-num {
  margin-left: 10px;
  font-size: 18px;
  color: #9a9c9e;
  text-align: center;
  margin-top: 8px;
}

.floor-box-point-box {
  margin: 0 10px 0 50px;
  display: flex;
  display: -webkit-flex;
  justify: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.floor-box-point-block {
  width: 70px;
  height: 30px;
  border-radius: 5px;
  margin-right: 10px;
  margin: 0 auto;
}

.floor-box-point-block-red {
  background-color: #EB8089;
}

.floor-box-point-block-yellow {
  background-color: #F7EB86;
}

.floor-box-point-block-greenyellow {
  background-color: #70D785;
}

.floor-box-point-block-gray {
  background-color: #333333;
}

.unit-box {
  width: 100px;
  height: 25px;
  line-height: 25px;
  background: #D6E6F9;
  margin: 10px auto 0px auto;
  border-radius: 5px;
  font-size: 16px;
  //font-weight: bold;
  color: #6096C9;
}

.building-box-name {
  width: 100px;
  height: 25px;
  line-height: 25px;
  background: #D6E6F9;
  color: #6096C9;
  font-size: 16px;
  margin: 0 auto 10px auto;
  text-align: center;
  border-radius: 5px;
}

.code-box {
  color: black;
  line-height: 30px;
  // color: #7eb2ea;
  text-align: center;
  margin: 3px 0;

}
</style>
